<template>
  <div>
    <!-- 轮播图 六大模块 -->
    <div class="topimg">
      <div class="top-lun">
        <el-carousel trigger="click" height="330px">
          <el-carousel-item v-for="(item, index) in lunImgList" :key="index">
            <img :src="item.img_url" alt="暂时无法加载" />
            <h3 class="small">{{ item.time }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div>
        <div
          v-for="(item, index) in modImgList"
          :key="index"
          class="top-module"
          @click="$router.push({ path: item.path })"
        >
          <img :src="item.img" alt="暂时无法加载" />
          <div>
            <p>{{modName[index]}}</p>
          </div>
        </div>
      </div> -->
    </div>
    <!-- 新闻资讯 -->
    <div>
      <div class="info">
        <div>新闻资讯</div>
        <div class="info-type">
          <div>行业新闻</div>
          <div>展会动态</div>
        </div>
      </div>
      <div class="info-for">
        <botany-information :informationData="informationData"></botany-information>
      </div>
      <div class="more" @click="$router.push({ path: '/home/information' })">更多 ></div>
      <!-- <div>
        <img
          style="width:100%;height:100px;margin-bottom:40px;"
          src="http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/233938yv.jpg"
          alt
        />
      </div> -->
    </div>
    <!-- 女性服装 -->
    <div>
      <div class="info">
        <div>女性服装</div>
        <div class="info-type">
          <div v-for="(item, index) in optionGalleryData" :key="index">{{item.type_name}}</div>
        </div>
      </div>
      <div class="info-for">
        <botany-gallery :galleryData="galleryData"></botany-gallery>
      </div>
      <div class="more" @click="$router.push({ path: '/home/gallery' })">更多 ></div>
    </div>
    <!-- 男性服装 -->
    <div>
      <div class="info">
        <div>男性服装</div>
        <div class="info-type">
          <div v-for="(item, index) in optionMeatyData" :key="index">{{item.type_name}}</div>
        </div>
      </div>
      <div class="info-for">
        <botany-meaty :meatyData="meatyData"></botany-meaty>
      </div>
      <div class="more" @click="$router.push({ path: '/home/meaty' })">更多 ></div>
      <!-- <div>
        <img
          style="width:100%;height:100px;margin-bottom:40px;"
          src="http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/233915uy.jpg"
          alt
        />
      </div> -->
    </div>
    <!-- 服装保养洗涤 -->
    <div>
      <div class="info">
        <div>服装保养洗涤</div>
        <div class="info-type">
          <div>服装保养</div>
          <div>服装洗涤</div>
        </div>
      </div>
      <div class="info-for">
        <botany-curing :curingData="curingData"></botany-curing>
      </div>
      <div class="more" @click="$router.push({ path: '/home/curing' })">更多 ></div>
      <!-- <div>
        <img
          style="width:100%;height:100px;margin-bottom:40px;"
          src="http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/233852vm.jpg"
          alt
        />
      </div> -->
    </div>
    <!-- 土壤知识 -->
    <!-- <div>
      <div class="info">
        <div>土壤知识</div>
        <div class="info-type">
          <div>土壤技术</div>
          <div>肥料技术</div>
        </div>
      </div>
      <div class="info-for">
        <soil-knowledge :soilData="soilData"></soil-knowledge>
      </div>
      <div class="more">更多 ></div>
      <div>
        <img
          style="width:100%;height:100px;margin-bottom:40px;"
          src="http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/233814a4.jpg"
          alt
        />
      </div>
    </div> -->
  </div>
</template>

<script>
// 新闻资讯
import botanyInformation from "@/components/botanyInformation";
// 女性服装
import botanyGallery from "@/components/botanyGallery";
// 男性服装
import botanyMeaty from "@/components/botanyMeaty";
// 服装保养洗涤
import botanyCuring from "@/components/botanyCuring";
// 土壤知识
import soilKnowledge from "@/components/soilKnowledge";
import {
  getCarouselImgList,
  curingList,
  meatyList,
  galleryList,
  informationList,
  soilList,
  optionGalleryList,
  optionMeatyList
} from "@/api/home/api";
export default {
  components: {
    botanyInformation,
    botanyGallery,
    botanyMeaty,
    botanyCuring,
    soilKnowledge
  },
  data() {
    return {
      // 首页轮播图 数据
      lunImgList: [],
      modImgList: [
        {
          path: "/home/soil",
          img:
            "http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/23290873.jpg"
        },
        {
          path: "/home/soil",
          img:
            "http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/232842fj.jpg"
        },
        {
          path: "/home/information",
          img:
            "http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/232820f5.jpg"
        },

        {
          path: "/home/information",
          img:
            "http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/232757bb.jpg"
        },
        {
          path: "/home/curing",
          img:
            "http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/232727j4.jpg"
        },
        {
          path: "/home/curing",
          img:
            "http://www.zhiwuba.com/universal/link/common/assets/upload/2019/0328/232653k1.jpg"
        }
      ],
      modName: [
        "肥料技术",
        "土壤技术",
        "展会动态",
        "行业新闻",
        "服装洗涤",
        "服装保养"
      ],
      meatyData: [],
      galleryData: [],
      informationData: [],
      curingData: [],
      soilData: [],
      optionGalleryData: [],
      optionMeatyData: []
    };
  },
  created() {
    this.getCarouselImgList();
    this.informationList();
    this.galleryList();
    this.meatyList();
    this.curingList();
    this.soilList();
    this.optionGalleryList();
    this.optionMeatyList();
  },
  methods: {
    // 获得分类数据
    optionMeatyList() {
      optionMeatyList().then(res => {
        let data = res.data;
        this.optionMeatyData = data.dataList;
      });
    },
    // 获得分类数据
    optionGalleryList() {
      optionGalleryList().then(res => {
        let data = res.data;
        this.optionGalleryData = data.dataList;
      });
    },
    // 女性服装
    galleryList() {
      let query = {
        address: "",
        current: 1,
        name: "",
        size: 12,
        type_id: ""
      };
      galleryList(query).then(res => {
        let data = res.data;
        data.dataList.forEach((item, index, arr) => {
          arr[index].img_list = JSON.parse(arr[index].img_list);
        });
        this.galleryData = data.dataList;
      });
    },
    // 多肉数据
    meatyList() {
      let query = {
        current: 1,
        name: "",
        size: 8,
        summary: "",
        type_id: ""
      };
      meatyList(query).then(res => {
        let data = res.data;
        this.meatyData = data.dataList;
      });
    },
    // 服装保养洗涤
    curingList() {
      let query = {
        current: 1,
        name: "",
        size: 4,
        summary: "",
        type: ""
      };
      curingList(query).then(res => {
        let data = res.data;
        this.curingData = data.dataList;
      });
    },
    // 土壤知识
    soilList() {
      let query = {
        current: 1,
        name: "",
        size: 4,
        summary: "",
        type: ""
      };
      soilList(query).then(res => {
        let data = res.data;
        this.soilData = data.dataList;
      });
    },
    // 新闻资讯数据
    informationList() {
      let query = {
        current: 1,
        name: "",
        size: 4,
        summary: "",
        type: ""
      };
      informationList(query).then(res => {
        let data = res.data;
        this.informationData = data.dataList;
      });
    },
    // 轮播图 数据
    getCarouselImgList() {
      getCarouselImgList().then(res => {
        let data = res.data;
        this.lunImgList = data.dataList;
      });
    }
  }
};
</script>
<!-- 轮播图 六大模块 -->
<style scoped>
.topimg {
  display: flex;
  margin-bottom: 25px;
}
.top-lun {
  width: 100%;
  height: 330px;
}
.top-lun >>> .el-carousel__button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fffefd;
  opacity: 1;
}
.top-lun >>> .is-active .el-carousel__button {
  background: #0dbd95;
}
.top-lun img {
  width: 100%;
  height: 100%;
}
.topimg > div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  width: 38%;
  height: 345px;
}
.top-module {
  width: 45%;
  height: 29%;
  margin-left: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  position: relative;
}
.top-module img {
  width: 100%;
  height: 100%;
}
.top-module div {
  width: 100%;
  height: 100%;
  background: rgba(103, 133, 133, 0.4);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.top-module div p {
  padding: 12px 14px;
  color: rgb(255, 255, 255);
  opacity: 0;
}
.top-module div:hover {
  opacity: 1;
}
.top-module div p {
  opacity: 1;
}
</style>
 <!-- 新闻资讯 -->
<style scoped>
.info {
  display: flex;
  width: 100%;
  border-bottom: 2px solid #e7e7e7;
}
.info > div {
  margin-bottom: 15px;
}
.info > div:first-child {
  font-size: 16px;
  font-weight: bold;
}
.info-type {
  display: flex;
  margin-left: auto;
}
.info-type div {
  margin-left: 36px;
  color: #777;
  font-size: 16px;
  cursor: pointer;
}
.info-type div:hover {
  color: #0dbd95;
}
.info-for {
  margin-top: 36px;
  width: 100%;
}
.more {
  width: 100%;
  text-align: right;
  color: #707070;
  cursor: pointer;
  margin-bottom: 40px;
}
</style>